<template>
	<view class="container"
		:style="{'backgroundColor': `rgba(${currentColor.RGB[0]}, ${currentColor.RGB[1]}, ${currentColor.RGB[2]}, 0.4)`}">
		<view class="share-view">
			<view id="contractimage" class="share-card" :style="{'background': oppositeColor}">
				<view class="title"
					:style="{'color': `rgba(${currentColor.RGB[0]}, ${currentColor.RGB[1]}, ${currentColor.RGB[2]}, 0.8)`}">
					<text class="set">{{colorSetName}}</text>
					<text class="dot">·</text>
					<text class="color">{{currentColor.name}}</text>
				</view>
				<view class="circle"
					:style="{'background': `linear-gradient(180deg, rgb(${currentColor.RGB[0]}, ${currentColor.RGB[1]}, ${currentColor.RGB[2]}), rgba(${currentColor.RGB[0]}, ${currentColor.RGB[1]}, ${currentColor.RGB[2]},0.6))`}">
					<image class="img" mode="aspectFit" :src="formatSrc"></image>
				</view>
			</view>
			<view class="generate-image-button" @click="saveBase64ImgFile">生成图片</view>
		</view>
	</view>
</template>

<script module="html2canvas" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		mounted() { //注意：当前页面渲染完成后，则会开始生成图片
			let that = this;
			setTimeout(() => {
				that.emitData()
			}, 300)
		},
		methods: {
			emitData() {
				// 根据自己需要截图区域
				console.log("开始生成图片");
				this.create('contractimage');
			},
			async create(id) {
				if (!id) {
					return false;
				}
				try {
					// this.$ownerInstance.callMethod('showLoading', true);
					const timeout = setTimeout(async () => {
						const domId = document.getElementById(id);
						const canvas = await html2canvas(domId, {
							width: domId.offsetWidth, //设置canvas尺寸与所截图尺寸相同，防止白边
							height: domId.offsetHeight, //防止白边
							logging: true,
							useCORS: true
						});

						const base64 = canvas.toDataURL('image/jpeg', 1);
						//base64图片生成成功后，执行renderFinish将base64传回去
						this.$ownerInstance.callMethod('renderFinish', {
							path: base64,
							el: id,
							height: domId.offsetHeight,
							width: domId.offsetWidth
						});
						clearTimeout(timeout);
						this.$ownerInstance.callMethod('hideLoading', true);
					}, 500);
				} catch (error) {
					this.$ownerInstance.callMethod('hideLoading', true);
					console.log(error)
				}
			}
		}
	}
</script>


<script>
	const COLORS = require('../../utils/data.js')
	const {
		getCorrectTextColor
	} = require('../../utils/util.js')

	// #ifdef APP-PLUS
	import permision from "@/common/permission.js"
	// #endif

	export default {
		data() {
			return {
				colorSetName: '',
				currentColor: {
					RGB: []
				},
				oppositeColor: '',
				canvasImage: '',
				formatSrc: '',
				test: ''
			}
		},
		onLoad(options) {
			console.log(options);
			const id = options.id.split('-')
			const currentColorSet = COLORS.find(item => item.id === Number(id[0]))
			const currentColor = currentColorSet.colors[id[1]]
			this.colorSetName = currentColorSet.name
			this.currentColor = currentColor
			this.oppositeColor = getCorrectTextColor(currentColor.RGB)
			this.formatSrc = `https://colors.ichuantong.cn/figure/${currentColor.figure || 'default.png'}`
		},
		methods: {

			showLoading() {
				uni.showLoading({
					title: '图片生成中…',
					mask: true
				})
			},
			hideLoading() {
				uni.hideLoading()
			},
			errorLoad(e) {
				console.log('图片加载失败：', e);
			},
			renderFinish(opt) { //截图成功回调
				console.log('opt', opt);
				let img = opt.path
				this.img = img;
				this.width = opt.width;
				this.height = opt.height;

				//格式化base64
				let base64 = img.replace(/^data:image\/\w+;base64,/, "");
				this.base64Img = base64 //保存base64字符串

				// this.saveBase64ImgFile();	//将base64文件保存到相册
			},
			saveBase64ImgFile() { //将base64文件保存到本地相册
				this.showLoading()
				let t = this;
				let base64 = t.base64Img
				console.log(base64);
				//手机端将base64转成png图片，此处需要使用真机调试
				const bitmap = new plus.nativeObj.Bitmap('text');
				bitmap.loadBase64Data(base64, function() {
					const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式
					console.log("saveBase64ImgFile", url)
					bitmap.save(url, {
						overwrite: true
					}, (i) => {
						console.log(1, i);

						uni.saveImageToPhotosAlbum({
							filePath: i.target,
							success() {
								console.log('图片保存成功')
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								})
								bitmap.clear()
							}
						})
					}, e => {
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						})
						console.log('e==>', e);
						bitmap.clear()
					})
				}, (e) => {
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
					bitmap.clear()
				})
			},
		}
	}
</script>

<style>
	.container {
		background-image: url(https://m.ifable.cn/images/bg.png), url();
		background-size: auto;
		background-repeat: repeat, repeat-x;
		background-position: 0 0;
		transition: background-color 1.6s ease 0s;
		overflow: hidden;
		color: rgb(255, 255, 235);
	}

	.share-view {
		position: relative;
		width: 100vw;
		height: 100vh;
	}

	.share-card {
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translateX(-50%);
		padding: 56rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-shadow: rgba(0, 0, 0, 0.2) -26rpx 36rpx 20rpx;
	}

	.title {
		position: absolute;
		right: 16.8rpx;
		bottom: 16.8rpx;
		font-size: 33.6rpx;
		padding: 8.4rpx 8.4rpx 16.8rpx;
		font-family: TChinese, serif;
	}

	.circle {
		width: 515.2rpx;
		height: 515.2rpx;
		border-radius: 50%;
		border: 4rpx solid;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.circle .img {
		width: 515.2rpx;
		height: 515.2rpx;
		opacity: 0.8;
	}

	.generate-image-button {
		position: absolute;
		left: 50%;
		bottom: 140rpx;
		transform: translateX(-50%);
		border: none;
		border-radius: 8.4rpx;
		padding: 16.8rpx 22.4rpx;
		font-size: 28rpx;
		color: rgb(238, 238, 238);
		background: rgb(31, 47, 45);
		box-shadow: rgba(0, 0, 0, 0.5) 0 10rpx 18rpx;
	}

	.share-card-canvas {
		position: absolute;
		left: -313px;
		width: 313px;
		height: 313px;
	}
</style>
